<extend name="./common" />
<block name='css'>
  <link rel="stylesheet" href="__PUBLIC__/static/home/barrager/css/barrager.css"/>

    <style type="text/css">
    
  </style>
</block>
<block name='content'>
<div class="modal fade" id="replayMsgBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">回复:<span id="toname"></span></h4>
            </div>
            <form id="replayMsgForm" method="post" class="form-inline" action="">
              <div class="modal-body">
                
          <div class="comment-title">
            <div class="form-group">
              <label for="commentName">昵称：</label>
              <input type="text" name="nickname" <if condition="F('webSet')['qqLogin'] eq 1"> readonly="readonly"</if> class="form-control" id="replaynickname" placeholder="张三" value="<?php echo session('visitor')['nickname'];?>">
            </div>
            <div class="form-group">
              <label for="commentEmail">邮箱：</label>
              <input type="text" name="email" class="form-control" id="replayemail" placeholder="留下邮箱便于收到回复">
            </div>
          </div>
          <input type="hidden" name="to" value="" id="replay_id_to">
          <div class="comment-title">
            <div class="form-group">
              <label for="commentName">验证：</label>
              <input type="text" name="code" placeholder="验证码" maxlength="4" class="form-control" id="replaycode">
            </div>
            <div class="form-group">
              <img style="display: inline;border: 1px solid #ccc;" src="__CONTROLLER__/verify" class="comment-form-text"  onclick="this.src='__CONTROLLER__/verify/'+Math.random()" id="verifyImg" style="height: 34px">
              <span style="line-height: 34px;    margin-left: 10px;">点击图片切换</span>
            </div>
          </div>
           <div class="comment-title">
            <div>
              <label for="commentName">评论：</label>
            <textarea placeholder="你的评论可以一针见血" name="message" id="replaymessage" style="width: 100%;" class="form-control" rows="5"></textarea>
            </div>
          </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  <button type="submit" class="btn btn-primary">提交更改</button>
              </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
  <div class="content-wrap"><!--内容-->
    <div class="content">

      <div class="content-block comment">
        <h2 class="title"><strong>留言</strong></h2>
        <form action="comment.php" method="post" class="form-inline" id="message-form">
          <div class="comment-title">
            <div class="form-group">
              <label for="commentName">昵称：</label>
              <input type="text" name="nickname" <if condition="F('webSet')['qqLogin'] eq 1"> readonly="readonly"</if> class="form-control" id="nickname" placeholder="张三" value="<?php echo session('visitor')['nickname'];?>">
            </div>
            <div class="form-group">
              <label for="commentEmail">邮箱：</label>
              <input type="text" name="email" class="form-control" id="email" placeholder="留下邮箱便于收到回复">
            </div>
          </div>
          <div class="comment-title">
            <div class="form-group">
              <label for="commentName">验证：</label>
              <input type="text" name="code" placeholder="验证码" maxlength="4" class="form-control" id="code">
            </div>
            <div class="form-group">
              <img style="display: block;border: 1px solid #ccc;" src="__CONTROLLER__/verify" class="comment-form-text"  onclick="this.src='__CONTROLLER__/verify/'+Math.random()" id="verifyImg">
              <span style="    line-height: 37px;    margin-left: 10px;">点击图片切换</span>
            </div>
          </div>
          <div class="comment-form">
            <textarea placeholder="你的留言可以一针见血" name="message" id="message"></textarea>
            <div class="comment-form-footer">
        <if condition="F('webSet')['qqLogin'] eq 1">
              <div class="comment-form-text" style="display: block;">
              <if condition="empty(session('visitor'))">
              未登录？
              <a onclick='toQzoneLogin()'><img src="__PUBLIC__/static/home/images/qqlogin.png"></a>
              <else />
              已登录：<?php echo session('visitor')['nickname'];?> 
              <a href="{:U('index/logout')}">&nbsp;【退出登录】</a>
              </if>
               </div>
               </if>
              <div class="comment-form-btn">
                <button type="submit" class="btn btn-default btn-comment">提交评论</button>
              </div>
            </div>
          </div>
        </form>
        <span style="display: none" id="nextpage">2</span>
        <div class="content-block comment-content">
        <h2 class="title"><strong>最新留言</strong></h2>

            <ul class="messageul">
            <empty name='messages'>
            <div class="c-comment-empty" style="display: block">
                还没有留言，快来抢沙发吧！
            </div>
            <else /> 

<foreach name="messages" item="m"> 
  <div class="am-comment"><a href="javascript:;">

  <if condition="F('webSet')['qqLogin'] eq 1">
<!-- 开启qq登录 -->
  <if condition="($m['to'] neq 0) AND ($m['is_admin'] eq 1)">
  <!-- 管理员回复 -->
    <img src="__PUBLIC__/static/home/images/readerAvatar.png" class="am-comment-avatar" width="36" height="36"> 
  <elseif condition="($m['to'] neq 0) AND ($m['is_admin'] eq 0)" />
  <!-- 非管理员回复 -->
    <if condition="!empty($m['avatar'])"> 
      <img src="{$m['avatar']}" class="am-comment-avatar" width="36" height="36"> 
    <else /> 
    <!-- 111 -->
      <img src="__PUBLIC__/static/home/images/avatars/{$m['id']%10}.jpg" class="am-comment-avatar" width="36" height="36"> 
    </if>
  <else />
    <if condition="!empty($m['avatar'])"> 
      <img src="{$m['avatar']}" class="am-comment-avatar" width="36" height="36"> 
    <else /> 
      <img src="__PUBLIC__/static/home/images/avatars/{$m['id']%10}.jpg" class="am-comment-avatar" width="36" height="36"> 
    </if>
  </if>
<else />
  <!-- 没开启 -->
  <if condition="($m['to'] neq 0) AND ($m['is_admin'] eq 1)">
  <!-- 管理员回复 -->
    <img src="__PUBLIC__/static/home/images/readerAvatar.png" class="am-comment-avatar" width="36" height="36"> 
  <elseif condition="($m['to'] neq 0) AND ($m['is_admin'] eq 0)" />
  <!-- 费管理员回复 -->
    <img src="__PUBLIC__/static/home/images/avatars/{$m['id']%10}.jpg" class="am-comment-avatar" width="36" height="36"> 
  <else /> 
  <!-- 正常 -->
    <if condition="!empty($m['avatar'])"> 
      <img src="{$m['avatar']}" class="am-comment-avatar" width="36" height="36"> 
    <else /> 
      <img src="__PUBLIC__/static/home/images/avatars/{$m['id']%10}.jpg" class="am-comment-avatar" width="36" height="36"> 
    </if>
  </if>
</if>
     </a><div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta"><a href="javascript:;" class="am-comment-author">
   <if condition="($m['to'] neq 0) AND ($m['is_admin'] eq 1)"> 
   <!-- 站长回复 -->
    站长</a> &nbsp;&nbsp;回复&nbsp;&nbsp;{$m['replay']}
    <elseif condition="($m['to'] neq 0) AND ($m['is_admin'] eq 0)" />
    <!-- 不是站长回复 -->
    {$m['nickname']}</a> &nbsp;&nbsp;回复&nbsp;&nbsp;
      <if condition="$m['replay_admin'] eq 1">
      站长
      <else />
      {$m['replay']}
      </if>
    <else /> 
    <!-- 留言 -->
    {$m['nickname']}</a>
   </if>
   &nbsp;&nbsp;
   <span class="hidden-xs">设备：{$m['systemos']}&nbsp;&nbsp;&nbsp; 浏览器：{$m['browser']}&nbsp;&nbsp;&nbsp;</span> 
   <time datetime="{$m['create_time']|date='Y-m-d H:i:s',###}">{$m['create_time']|date='Y-m-d H:i:s',###}</time></div></header>
   <div class="am-comment-bd">
<if condition="$m['to'] neq 0"> 
<!-- 有回复 -->
  <div class="am-comment"><a href="javascript:;">
  <if condition="$m['replay_admin'] eq 1">
    <!-- admin -->
    <img src="__PUBLIC__/static/home/images/readerAvatar.png" class="am-comment-avatar" width="36" height="36"> 
  <else />
  <!-- 不是admin回复 -->
    <if condition="F('webSet')['qqLogin'] eq 1"> 
      <!-- 开启qq登录 -->
      <if condition="!empty($m['replay_a'])"> 
        <!-- qq头像 -->
        <img src="{$m['replay_a']}" class="am-comment-avatar" width="36" height="36"> 
      <else /> 
        <!-- %头像 -->
        <img src="__PUBLIC__/static/home/images/avatars/{$m['to']%10}.jpg" class="am-comment-avatar" width="36" height="36"> 
      </if> 
    <else /> 
      <!-- 没开启qq -->
     <img src="__PUBLIC__/static/home/images/avatars/{$m['to']%10}.jpg" class="am-comment-avatar" width="36" height="36"> 
    </if> 
  </if>
         </a><div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta"><a href="javascript:;" class="am-comment-author">
         <if condition="($m['to'] neq 0) AND ($m['replay_admin'] eq 1)">
         站长
         <else />
       {$m['replay']}
       </if>
       </a>&nbsp;&nbsp;<span class="hidden-xs">设备：{$m['replay_systemos']}&nbsp;&nbsp;&nbsp; 浏览器：{$m['replay_browser']}&nbsp;&nbsp;&nbsp;</span><time datetime="{$m['replay_create_time']|date='Y-m-d H:i:s',###}">{$m['replay_create_time']|date='Y-m-d H:i:s',###}</time></div></header>
        <div class="am-comment-bd">
        {$m['replay_msg']} 
        </div><footer class="am-comment-footer"><div class="am-comment-actions">
        <a class="glyphicon glyphicon-thumbs-up" onclick="CommentUpDown({$m['replay_id']},1,1)">点赞[<span class="up_{$m['replay_id']}">{$m['replay_upm']}</span>]</a>
        <a class="glyphicon glyphicon-thumbs-down" onclick="CommentUpDown({$m['replay_id']},0,1)">踩[<span class="down_{$m['replay_id']}">{$m['replay_downm']}</span>]</a>
        <a class="glyphicon glyphicon-share-alt" onclick="replayMsg({$m['replay_id']},'{$m['replay']}')">回复</a></div></footer></div></div>
   </if>
    {$m['message']} 
   </div><footer class="am-comment-footer"><div class="am-comment-actions">
   <a class="glyphicon glyphicon-thumbs-up" onclick="CommentUpDown({$m['id']},1,1)">点赞[<span class="up_{$m['id']}">{$m['upm']}</span>]</a>
   <a class="glyphicon glyphicon-thumbs-down" onclick="CommentUpDown({$m['id']},0,1)">踩[<span class="down_{$m['id']}">{$m['downm']}</span>]</a>
   <a class="glyphicon glyphicon-share-alt" onclick="replayMsg({$m['id']},'{$m['nickname']}')">回复</a></div></footer></div></div>
</foreach>

            </empty>
          </ul>
        </div>
      </div>
    </div>
  </div>
</block>

<block name='js'>
<script type="text/javascript" src="__PUBLIC__/static/home/barrager/jquery.barrager.min.js"></script>
<script>
  do{
    if({$jsonMessages}===null){
      break;
    }
    var looper_time=3*1000;
    var items={$jsonMessages};
    var total={$jsonMessages}.length;
    var run_once=true;
    var index=0;
    sss();
    function sss(){
      if(run_once){
          looper=setInterval(sss,looper_time);                
          run_once=false;
      }
      $('body').barrager(items[index]);
      index++;
      if(index == total){
          clearInterval(looper);
          return false;
      }
    }
  }while(false);
</script>
<script type="text/javascript">
function toQzoneLogin() {
   var _url='/index/qqlogin';  //转向网页的地址; 
   var name='TencentLogin';    //网页名称，可为空; 
   var iWidth=450; //弹出窗口的宽度; 
   var iHeight=320;   //弹出窗口的高度; 
   //获得窗口的垂直位置 
   var iTop = (window.screen.availHeight - 30 - iHeight) / 2; 
   //获得窗口的水平位置 
   var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; 
   window.open(_url, name, 'height=' + iHeight +
    ',innerHeight=' + iHeight + ',width=' + iWidth +
     ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + 
     ',status=1,toolbar=no,menubar=no,location=1,resizable=no,scrollbars=0,titlebar=no');
}
</script>
  <script type="text/javascript">
    // 点赞，点踩
    function CommentUpDown(id,s,m){
      var account1= $.cookie('message_up_id_'+id+'_m_'+m);
      var account2= $.cookie('message_down_id_'+id+'_m_'+m);
      if(s==1){
        if(account1=='1'){
          layer.msg("已经点过赞了");
          return false;
        }
      }else{
        if(account2=='1'){
          layer.msg("已经点过踩了");
          return false;
        }
      }
      var pdata={'id':id,'s':s,'m':m};
      $.post('{:U("__CONTROLLER__/commentUpDow")}',pdata,function(res){
        if(res.status){
          if(s==1){
            $(".up_"+id).each(function(index, el) {
              $(el).text(parseInt($(el).text())+1);
            });
            $.cookie('message_up_id_'+id+'_m_'+m,1,{expires:30*3600*24}); 
          }else{
            $(".down_"+id).each(function(index, el) {
             $(el).text(parseInt($(el).text())+1);
            });
            $.cookie('message_down_id_'+id+'_m_'+m,1,{expires:30*3600*24});
          }
          layer.msg(res.msg);
        }else{
          layer.msg(res.msg);
        }
      })
    }

    // 回复
    function replayMsg(id,toname){
      $("#toname").text(toname);
      $("#replay_id_to").val(id);
      $('#replayMsgBox').modal();
    }
    $("#replayMsgForm").submit(function(){
      var pdata=$(this).serialize();
      console.log(pdata);
      $.post('{:U("__ACTION__")}',pdata,function(res){
        if(res.status){
          location.reload();
        }else{
          layer.alert(res.msg,{icon:5});
        }
      });
      return false;
    })
    $("#message-form").submit(function(){
      var nickname=$.trim($("#nickname").val());
      var email=$("#email").val();
      var message=$.trim($("#message").val());
      var code=$("#code").val();
      if(message==''){
        layer.alert('留言不能为空');
        return false; 
      }
      $.post('{:U("__ACTION__")}',{'nickname':nickname,'email':email,'message':message,'code':code},function(res){
        if(res.status){
          <if condition="F('webSet')['qqLogin'] eq 1">
            var avatar='<?php echo session("visitor")["figureurl_1"];?>';
          <else />
            var avatar='__PUBLIC__/static/home/images/avatars/'+parseInt(res.mid)%10+'.jpg';
          </if>
          var html='<div class="am-comment"><a href="javascript:;"><img src="'+avatar+'" class="am-comment-avatar" width="36" height="36"></a><div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta"><a href="javascript:;" class="am-comment-author">';
html+=nickname+'</a>&nbsp;&nbsp;<span class="hidden-xs">';
html+='设备：'+res.systemos+'&nbsp;&nbsp;&nbsp;浏览器：'+res.browser+'&nbsp;&nbsp;&nbsp;</span><time datetime="'+res.create_time+'">'+res.create_time+'</time></div></header><div class="am-comment-bd">'+message+'</div><footer class="am-comment-footer"><div class="am-comment-actions"><a class="glyphicon glyphicon-thumbs-up" onclick="CommentUpDown('+res.mid+',1,1)">点赞[<span class="up_'+res.mid+'">0</span>]</a><a class="glyphicon glyphicon-thumbs-down" onclick="CommentUpDown('+res.mid+',0,1)">踩[<span class="down_'+res.mid+'">0</span>]</a><a class="glyphicon glyphicon-share-alt">回复</a></div></footer></div></div>';
          $(".c-comment-empty").css('display', 'none');
          $(".messageul").prepend($(html).fadeIn(400));
          layer.msg('提交成功');
        }else{
          $("#verifyImg").attr('src', '__CONTROLLER__/verify/'+Math.random());
          layer.alert(res.msg);
        }
      });
      return false;
    });


    //滚动条到页面底部加载更多案例 
    $(window).scroll(function(){
      var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
      var scrollHeight = $(document).height();   //当前页面的总高度
      var clientHeight = $(this).height();    //当前可视的页面高度
      if(scrollTop + clientHeight >= scrollHeight){ 
        /*翻页*/
        var page=$('#nextpage').text();
        next(page);
      }else if(scrollTop<=0){ 

      }
    });
    flag=true;
    function next (p){
      if (p > {$pageCount}){
          if(flag){
            var foot='<hr><h5 style="text-align:center;color:#aaa">已经到底了</h5>';
            $(".messageul").append($(foot).fadeIn(400));
            flag=false;
          }
          return false;
        }
      // layer.msg('请稍等，正在加载...');
      var _url = window.location+'?p='+p;
      if (p <= {$pageCount}){
          $('#nextpage').text(parseInt(p)+1);
        }
      jQuery.ajax({
        type : "POST",
        url : _url,
        success : function (data){
          result = jQuery(data).find(".comment-content .messageul .am-comment");
          // 渐显新内容
          jQuery(function (){
            jQuery(".messageul").append(result.fadeIn(300));
          layer.closeAll();
          });
        }
      });
    }
  </script>
</block>